$(function() {
    $.ajax({
        url: BigNew.category_list,
        type: 'get',
        dataType: 'json',
        success: function(backData) {
            console.log(backData);
            //模板引擎渲染数据
            $('.table>tbody').html(template('cat-list', backData))
        }
    });




    //    本页面难点： 新增分类和修改分类 模态框复用 
    //             * 解决方案：
    //                 (1)使用行内属性data-toggle="modal" data-target="#myModal"  (实现复用)(弹窗)
    //                 (2)通过事件对象e.relatedTarget,知道哪一个按钮触发模态框 （不同按钮业务逻辑不同）
    //         1.新增分类
    //             1.1 模态框确认按钮 显示 “新增”
    //             1.2 点击“新增” ： 发送新增ajax  (name,slug)
    //         2.编辑分类
    //             2.1 模态框确认按钮 显示 “编辑”
    //             2.2 取出当前编辑的分类数据，显示到模态框 （页面内元素传值）
    //             2.3 点击“编辑” ： 发送编辑ajax (id,name,slug)

    //         解决核心思路 ： 只需要判断用户点击的是新增还是编辑即可。


    //模态框默认的弹出事件
    $('#myModal').on('show.bs.modal', function(e) {
        if ($(e.relatedTarget).text() == '新增分类') {
            //新增逻辑
            //(1)设置确认按钮文本为： ‘新增’
            $('.btn-confirm').text('新增');

        } else {
            //编辑逻辑
            //(1)设置确认按钮文本为： ‘编辑’
            $('.btn-confirm').text('编辑');
            //渲染文本
            $('#recipient-name').val($(e.relatedTarget).parent().prev().prev().text());
            $('#message-text').val($(e.relatedTarget).parent().prev().text());


            //****将编辑按钮的data-id传递给模态框确认按钮，确认按钮提交数据时匹配数据的id                   
            $('.btn-confirm').attr('data-id', $(e.relatedTarget).attr('data-id'));
        }
    });


    //点击模态框取消按钮清空表单内容
    $('.btn-cancel').click(function() {
        //清空表单文本(重置表单)   dom元素表单.reset()  转成dom
        $('form')[0].reset();
    });


    //点击新增和编辑按钮执行不同的Ajax
    $('.btn-confirm').click(function() {

        if ($(this).text() == '新增') {
            $.ajax({
                url: BigNew.category_add,
                type: 'post',
                dataType: 'json',
                data: {
                    name: $('#recipient-name').val(),
                    slug: $('#message-text').val(),
                },
                success: function(backData) {
                    console.log(backData);
                    if (backData.code == 201) {
                        alert('新增成功');
                        //刷新页面
                        window.location.reload();
                    }
                },


                error: function() {
                    alert('分类和描述不能重复');
                }

            });
        } else {
            /* 修改分类 */
            $.ajax({
                url: BigNew.category_edit,
                type: 'post',
                dataType: 'json',
                data: {
                    name: $('#recipient-name').val(),
                    slug: $('#message-text').val(),
                    //匹配数据的id
                    id: $(this).attr('data-id')
                },
                success: function(backData) {
                    console.log(backData);
                    if (backData.code == 200) {
                        alert('修改成功');
                        //刷新页面
                        window.location.reload();
                    }
                }
            });
        }
    })





    //删除按钮
    $('.table>tbody').on('click', '.btn-delete', function() {
        //获取分类id
        // let id = $(this).attr('data-id');
        // console.log(id);
        //ajax发送请求
        $.ajax({
            url: BigNew.category_delete,
            type: 'post',
            dataType: 'json',
            data: {
                id: $(this).attr('data-id')
            },
            success: function(backData) {
                console.log(backData);
                if (backData.code == 204) {
                    alert('删除成功');
                    //刷新页面
                    window.location.reload();
                }

            }
        });

    });



})